<template>
	<div style="flex: 0 0 80px;">
		<!-- 头部板块 -->
		<div class="top">
			<!-- 左边部分 -->
			<div class="top-left">
				<!-- 返回按钮 -->
				<div class="back pointer" v-if="showBack" @tap="backPage">
					<image src="../../static/img/back.png" mode=""></image>
					<span class="back-text">返回</span>
				</div>
				<!-- 天气显示部分 -->
				<!-- <div class="weather">
					<div class='weather-item'>
						<image src="../../static/header-weather.png" mode=""></image>
					</div>
					<div class='weather-item'>
						<span>{{txt}}</span>
						<span>{{temp}}</span>
					</div>

				</div> -->
				<!-- 时间显示部分 -->
				<div class="time">
					<span class="time-item">{{day}}</span>
					<span class="time-item">{{week}}</span>
					<span class="time-item">{{time}}</span>
				</div>
			</div>
			<!-- 中间部分 -->
			<div class="top-middle">
				<span>{{topTitle}}</span>
			</div>
			<!-- 右边部分 -->
			<div class="top-right">
				<div class="fault pointer" v-if='alarmNumObj.faultNum>0' @tap="showFaultDialog">
					<image src="../../static/img/guzhang.png" mode="">

					</image>
					<span>{{alarmNumObj.faultNum<=99?alarmNumObj.faultNum:"99+"}}</span>
				</div>
				<div class="alarm pointer" v-if='alarmNumObj.alarmNum>0' @tap="showAlarmDialog">
					<image src="../../static/img/slices.png" mode="">
					</image>
					<span>{{alarmNumObj.alarmNum<=99?alarmNumObj.alarmNum:"99+"}}</span>
				</div>
				<div class="video pointer" v-if='alarmNumObj.videoAlarmNum>0' @tap="showVideoDialog">
					<image src="../../static/img/monitor.png" mode="">
					</image>
					<span>{{alarmNumObj.videoAlarmNum<=99?alarmNumObj.videoAlarmNum:"99+"}}</span>

				</div>
				<!--  刷新板块-->
				<div class="refrsh pointer" @tap="refresh">
					<image src="../../static/img/refrsh.png" title="刷新" mode=""></image>
					<span class="refrsh-text"></span>
				</div>
				<!-- 个人头像信息板块 -->
				<div class='sigle-user pointer'>

					<oh-drop-menu>
						<image src="../../static/img/avtor.png" mode="" slot="title"></image>
						<span class="sigle-text" slot="title">{{userName}}</span>
						<image class="arrow" src="../../static/img/bottom-arrow.png" mode="" slot="title"></image>
						<oh-drop-item v-for="item in menuList" :key="item.id" @click="selectMenuItem(item.id)">
							{{item.text}}
						</oh-drop-item>
					</oh-drop-menu>
				</div>
			</div>
		</div>
		<!-- 报警弹窗 -->
		<alarm-device ref='alarmDialog' v-if="alarmDialog" :isSpeaker.sync="isSpeaker" @closeModel="isShowModel"></alarm-device>
		<!-- 故障弹窗 -->
		<fault-model ref='faultDialog' v-if="faultDialog" @closeFaultModel="isShowFaultModel"></fault-model>
		<!-- 视屏报警弹窗 -->
		<video-model ref='videoDialog' v-if="videoDialog" :isSpeaker.sync="isSpeaker" @closeVideoModel="isVideoModel"></video-model>
		<!-- 报警语音 -->
		<!-- <audio v-if='isSpeaker' id="alarmAudio" src="/static/voice/alarm.mp3" style="opacity:0;width: 0;height: 0" preload="auto" loop="loop" controls="" hidden="true"></audio> -->
		<app-download :show.sync="appDownloadShow"></app-download>
	</div>
</template>
<script>
	import alarmDevice from "@/component/model/alarm-model.vue"
	import faultModel from "@/component/model/falut-model.vue"
	import videoModel from "@/component/model/video-model.vue"
	import ohDropMenu from "@/components/oh-drop-menu/oh-drop-menu.vue"

	import AppDownload from "@/component/dealog/AppDownload.vue"
	export default {
		components: {
			alarmDevice,
			faultModel,
			videoModel,
			ohDropMenu,
			AppDownload
		},
		data() {
			return {
				day: '',
				week: '',
				time: '',
				sd: '',
				temp: '',
				txt: '',
				alarmDialog: false, //报警弹窗
				deptId: '', //所属单位id
				buildId: '', //当前建筑id
				faultDialog: false, //故障弹窗
				videoDialog: false, //视屏报警弹窗
				timer: null,
				showBack: false, //是否显示返回按钮
				topTitle: '', //标题
				isSpeaker: false, //是否开启报警声
				userName: '',
				innerAudioContext: null,
				menuList: [
					{
						id: 1,
						value: 1,
						text: '退出登录'
					},
					{
						id: 2,
						value: 2,
						text: '管理后台'
					},
					{
						id: 3,
						value: 3,
						text: '移动端下载'
					},
					{
						id: 4,
						value: 4,
						text: '版本号v1.1.0'
					}
				],
				alarmNumObj: {},
				appDownloadShow: false
			}
		},
		async created() {
			// 监听全局报警事件
			this.monitorInit()

			this.timerFun()
			if (this.timer) {
				clearInterval(this.timer)
			}
			this.timer = setInterval(this.timerFun.bind(this), 1000)
			let netWorkFlag= await this.$help.getNetWork()
			if (netWorkFlag) {
				let res = await this.$api.getWeaterInfo()
				this.temp = res.data.temp + "℃"
				this.txt = res.data.wd + '-' + res.data.ws;
			}
			// let res = await this.$api.countByBuildId({
			// 	// buildId: this.buildId
			// })

			let info = JSON.parse(uni.getStorageSync('user'))
			this.topTitle = info.systemName || '中科图灵智慧消防管理平台'
			this.userName = info.username || ''

			//getCurrentPages 可以得到所有页面对象
			let routes = getCurrentPages()
			if (routes[routes.length - 1].route == "pages/newDetail/newDetail") {
				this.showBack = true
			} else {
				this.showBack = false
			}
			this.getAlarmNum()
		},
		methods: {
			async getAlarmNum() {
				let res2 = await this.$api.getAlarmCount({
					deptId:null,
					isDept:null
				})
				// if (res2.data.alarmNum > 99) {
				// 	res2.data.alarmNum = "99+"
				// }
				// if (res2.data.faultNum > 99) {
				// 	res2.data.faultNum = "99+"
				// }
				// if (res2.data.videoNum > 99) {
				// 	res2.data.videoAlarmNum = "99+"
				// }
				this.alarmNumObj = res2.data
			},
			// 监听全局报警事件
			monitorInit() {
				let self = this
				uni.$on('alarmshow', function(data) { //监听设备报警弹窗
					self.getAlarmNum()
					if (data.status == 2) { //设备自动恢复正常状态时
						//弹窗已打开,则只刷新数据
						if (self.alarmDialog) {
							self.$refs.alarmDialog.init()
						}
						// 设备正常时关闭报警语音
						getApp().globalData.innerAudioContext.stop()
						self.isSpeaker = false
					} else {
						// 如果报警弹窗已经是显示状态
						// 向子组件传值
						self.isSpeaker = true
						//暂停之前的播放
						getApp().globalData.innerAudioContext.stop()
						getApp().globalData.innerAudioContext.play()
						if (self.alarmDialog) {
							//弹窗已打开,则只刷新数据
							self.$refs.alarmDialog.init()
						} else {
							self.faultDialog = false
							self.alarmDialog = true
						}
					}
				})
				uni.$on('abnormalshow', function(data) { //监听故障弹窗
					self.getAlarmNum()
					if (data.status == 2) { //设备自动恢复正常状态时
						//弹窗已打开,则只刷新数据
						if (self.faultDialog) {
							self.$refs.faultDialog.init()
						}
					} else { //故障时
						// 报警弹窗未打开才显示故障弹窗
						if (!self.alarmDialog) {
							self.faultDialog = true
						}
					}

				})
				uni.$on('videoshow', function(data) { //监听视频报警弹窗
					self.getAlarmNum()
					if (data.status == 0) { //视频报警自动恢复
						//如果视频弹窗是开启的,就只刷新视频弹窗数据
						if (self.videoDialog) {
							self.$refs.videoDialog.requestVideoAlarmList()
						}
					} else {
						//视频报警时关闭故障弹窗和报警弹窗
						self.alarmDialog = false
						self.faultDialog = false

						// 重启报警音
						self.isSpeaker = true
						getApp().globalData.innerAudioContext.stop()
						getApp().globalData.innerAudioContext.play()


						//如果视频弹窗是开启的,就只刷新视频弹窗数据
						if (self.videoDialog) {
							self.$refs.videoDialog.requestVideoAlarmList()
						} else {
							console.log('aaabbbb')
							self.videoDialog = true
						}

					}
				})
			},
			//获取时间
			timerFun() {
				var datetime = new Date();
				var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
				var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
				var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
				var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();

				this.day = month + '月' + date + '日';
				this.week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][datetime.getDay()];

				this.time = hour + ':' + minute;
			},
			//报警弹窗的显示
			showAlarmDialog() {
				this.alarmDialog = true
			},
			isShowModel(val) {
				this.alarmDialog = val
				getApp().globalData.innerAudioContext.stop()
			},
			isShowFaultModel(val) {
				this.faultDialog = val
				getApp().globalData.innerAudioContext.stop()
			},
			//刷新
			refresh() {
				this.getAlarmNum()
				//getCurrentPages 可以得到所有页面对象
				let routes = getCurrentPages()
				if (routes[routes.length - 1].route == "pages/newDetail/newDetail") {
					uni.$emit('globalRefreshDetail', true)
				} else {
					uni.$emit('globalRefresh', true)
				}
			},
			//点击返回跳转回首页
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			//控制故障弹窗
			showFaultDialog() {
				this.faultDialog = true
			},
			//控制视屏报警弹窗
			showVideoDialog() {
				this.videoDialog = true
			},
			isVideoModel(val) {
				this.videoDialog = val
				getApp().globalData.innerAudioContext.stop()
			},
			closeDialog() {
				document.querySelector('#alarmAudio').pause()
				document.querySelector('#alarmAudio').currentTime = 0.0;
			},
			//登出
			selectMenuItem(id) {
				if (id === 1) {
					uni.redirectTo({
						url: "../../pages/login/login"
					})
				}else if(id === 2){
					window.open(uni.getStorageSync('urlText'))
				}else {
					this.appDownloadShow = true
				}
			},
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>
<style lang="scss" scoped>
		.top {
			box-sizing: border-box;
			height: 80px;
			background: url(@/static/img/top1.png) no-repeat center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			padding: 0 72rpx 32rpx;

			.top-left {
				flex: 7;
				display: flex;
				align-items: center;

				.back {
					image {
						width: 15px;
						height: 13px;
					}

					.back-text {
						padding-left: 4px;
						color: #00FFF6;
					}
				}

				.weather {
					margin-left: 0.2rem;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					.weather-item {
						display: inline-block;
						line-height: 44px;

						image {
							width: 24px;
							height: 24px;
							vertical-align: middle;
							margin-right: 10px;
						}

						span {
							margin-left: 10px;
						}
					}
				}

				.time {

					margin-left: 40px;

					.time-item {
						color: #FFFFFF;
						margin-right: 20px;

					}
				}

			}

			.top-middle {
				flex: 5;
				text-align: center;
				font-size: 30px;
				color: #02C3FF;
				font-family: 'PingFangSC-Medium';
			}

		.top-right {
			color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			flex: 7;
			align-items: center;

			.fault {
				position: relative;

				span {
					position: absolute;
					padding: 3px 6px;
					border-radius: 11px;
					background-color: rgba(255, 95, 95, 0.7000);
					left: 15px;
					top: -5px;
				}
			}

			.alarm {
				position: relative;

				span {
					position: absolute;
					padding: 3px 10px;
					border-radius: 11px;
					background-color: rgba(255, 95, 95, 0.7000);
					left: 15px;
					top: -5px;
				}
			}

			.video {
				position: relative;

				span {
					position: absolute;
					padding: 3px 6px;
					border-radius: 11px;
					background-color: rgba(255, 95, 95, 0.7000);
					left: 15px;
					top: -5px;
				}
			}
			image {
				width: 24px;
				height: 24px;
				margin-right: 35px;
				vertical-align: middle;
			}

			.refrsh {
				display: flex;
				align-items: center;
				image {
					margin-right: 10px;
					vertical-align: middle;
				}

					.refrsh-text {
						color: #02C3FF;
						font-size: 16px;
					}
				}

			.sigle-user {
				margin-left: 40px;

				image {
					margin-right: 10px;
					vertical-align: middle;
				}

				.sigle-text {
					color: #FFFFFF;
					margin-right: 5px;
				}

				.arrow {
					width: 12px;
					height: 8px;

				}

			}

		}
	}

	::v-deep .bc-drop-content {
		background-color: rgba(27, 165, 255, 0.800);
	}
</style>
